<template>
    <div>
        <Row :gutter="8" class="ivu-mb-8">
            <Col>
            <Button type="primary" @click="changeAdd('add',{id:''})" v-hasC="{
                name: '-v1-search-setting-update-robot-info',
                flag: '/v1/search/setting/update-robot-info',
            }">新增</Button>
            </Col>
        <!-- <Col style="color:#ff9900;line-height:40px;"><Icon type="md-alert" color="#ff9900"></Icon>搜索词配置发生变化，会提醒至钉钉群</Col> -->
        </Row>
        <Table border :columns="columns" :data="data" max-height="600">
            <template slot="option" slot-scope="{row}">
                <a type="primary" @click="changeAdd('edit',row)"
                   v-hasC="{
                       name: '-v1-search-setting-update-robot-info2',
                       flag: '/v1/search/setting/update-robot-info',
                   }"
                >编辑</a>
                <Divider type="vertical" 
                         v-hasC="
                          
                             {
                                 name: '-v1-search-setting-delete-robot-info',
                                 flag: '/v1/search/setting/delete-robot-info',
                             }
                         "
                ></Divider>
                <a style="color:#ed4014"  @click="deleteTag(row)" 
                   v-hasC="{
                       name: '-v1-search-setting-delete-robot-info',
                       flag: '/v1/search/setting/delete-robot-info',
                }">删除</a>
            </template>

        </Table>
        <Modal v-model="modalStatus" :title="modalTitle" width="600"  @on-cancel="handleReset(formValidate)">
            <Form ref="formValidate" :model="formData" :rules="ruleValidate"  :label-width="120">
                <FormItem label="群号：" prop="group_id">
                    <Input v-model="formData.group_id" placeholder="请输入群号"  style="width:300px"></Input>
                </FormItem>
                <FormItem label="钉钉群token：" prop="access_token">
                    <Input v-model="formData.access_token" type="textarea" :autosize="{ minRows: 2, maxRows: 6 }" placeholder="请输入钉钉群token"  style="width:300px"></Input>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button @click="handleReset(formValidate)">取消</Button>
                <Button type="primary" :loading="formloading" @click="handleSubmit(formValidate)">确定</Button>
            </div>
        </Modal>
    </div>
</template>
<script>
    import { settingIndex,updateInfo,deleteInfo} from '@/api/hqapi';
    export default {
        data(){
            return {
                formValidate: 'formValidate',
                columns: [
                    {
                        title: '群号',
                        align: 'center',
                        key: 'group_id',
                        minWidth: 100,

                    },
                    {
                        title: '钉钉群token',
                        align: 'center',
                        key: 'access_token',
                        minWidth: 100,

                    },
                    {
                        title: '操作时间',
                        align: 'center',
                        key: 'updated_at',
                        minWidth: 100,

                    },
                    {
                        title: '操作人',
                        align: 'center',
                        key: 'operate_name',
                        minWidth: 100,

                    },
                    {
                        title: '操作',
                        align: 'center',
                        slot: 'option',
                        minWidth: 100,

                    },
                ],
                data: [],
                modalStatus: false,
                formData: {
                    id: '',
                    group_id: '',
                    access_token: '',
                  
                },
                ruleValidate: {
                    access_token: [ { required: true, message: '请输入钉钉群token', trigger: 'blur' }]
                },
                formloading: false,
                modalTitle: '',
            };
        },
        methods: {
            initial(){
                this._settingIndex();
            },
            // 获取列表
            _settingIndex(){
                settingIndex().then(res => {
                    this.data = res;
                });
            },
            changeAdd(e, row) {
                this.modalStatus = true;
                if(e == 'add') {
                    this.modalTitle = '新增';
                }else {
                    this.modalTitle = '编辑';
                    this.formData = {
                        id: row.id,
                        group_id: row.group_id,
                        access_token: row.access_token,
                       
                    };
                }
            },
            handleReset(name){
                this.$refs[name].resetFields();
                this.modalStatus = false;
            },
            handleSubmit(name){
                this.$refs[name].validate(valid => {
                    if(valid) {
                        this.formloading = true;
                        if(this.modalTitle === '新增'){
                            const params = {
                                group_id: this.formData.group_id,
                                access_token: this.formData.access_token
                            };
                            updateInfo(params).then(res => {
                                this.$Message.success('新增成功');
                                this.formloading = false;
                                this.handleReset(name);
                                this.initial();
                            }).catch(() => {
                                this.formloading = false;
                            });
                        }else {
                            const params = {
                                id: this.formData.id,
                                group_id: this.formData.group_id,
                                access_token: this.formData.access_token
                            };
                            updateInfo(params).then(res => {
                                this.$Message.success('编辑成功');
                                this.formloading = false;
                                this.handleReset(name);
                                this.initial();
                            }).catch(() => {
                                this.formloading = false;
                            });
                        }
                        
                    }
                });
            },
            /* 删除 */
            deleteTag(row) {
                this.$Modal.confirm({
                    title: '删除确认',
                    content:
                        '删除后钉钉群将失去提醒',
                    loading: true,
                    onOk: () => {
                        deleteInfo({ id: row.id }).then(res => {
                            this.$Modal.remove();
                            this.$Message.success('删除成功');
                            this.initial();
                        });
                    }
                });
            },
        }
    };
</script>